<app-header-static></app-header-static>
<div class="main_content">
  <app-side-bar style="background-color: rgb(250, 250, 250);"></app-side-bar>
  <div class="container-fluid main_content">
    <div class="row">
      <div class="dashboard">
        <div class="md-container main_content" id="card_container">
          <div class="ev-md-container ev-card-panel ev-z-depth-5 challenge-title-container">
            <div class="col s12 m3 l3 center">
              <img class="profile-photo" src="assets/images/profile.png" />
              <div class="item">
                <div class="content fw-regular">
                  {{ user.username }}
                </div>
                <div class="fs-15">
                  {{ user.email }}
                </div>
              </div>
              <div class="item" id="profile_layout">
                <div class="highlight">
                  <span class="fw-regular fs-14">Profile Completed</span>
                  <br />
                  <span class="text-med-black">{{ pcomp }}</span>
                </div>
              </div>
              <br />
              <br />
              <div class="item" id="auth_tok">
                <button
                  class="btn ev-btn-dark waves-effect waves-dark grad-btn grad-btn-dark fs-14"
                  id="auth_tok_button"
                  (click)="isTokenModalVisible = true"
                >
                  Get your Auth Token
                </button>
              </div>
            </div>
            <div class="col s12 m4 l4 center user-info" id="user_info">
              <div class="user-details">
                <ul>
                  <li>
                    <div class="item">
                      <span class="text-light-black fw-semibold fs-12"> First Name<br /> </span>
                      <div class="content fw-regular">
                        {{ user.first_name }}
                      </div>
                    </div>
                  </li>
                  <li>
                    <div class="item">
                      <span class="text-light-black fw-semibold fs-12"> Last Name<br /> </span>
                      <div class="content fw-regular">
                        {{ user.last_name }}
                      </div>
                    </div>
                  </li>
                  <li>
                    <div class="item">
                      <span class="text-light-black fw-semibold fs-12"> Affiliated to<br /> </span>
                      <div class="content fw-regular">
                        {{ user.affiliation }}
                      </div>
                    </div>
                  </li>
                </ul>
              </div>
            </div>
            <div class="col s12 m5 l5 user-urls center">
              <ul>
                <li>
                  <div class="item">
                    <span class="text-light-black fw-semibold fs-12"> Google Scholar Url<br /> </span>
                    <div class="content fw-regular">
                      {{ user.google_scholar_url }}
                    </div>
                  </div>
                </li>
                <li>
                  <div class="item">
                    <span class="text-light-black fw-semibold fs-12"> GitHub Url<br /> </span>
                    <div class="content fw-regular">
                      {{ user.github_url }}
                    </div>
                  </div>
                </li>
                <li>
                  <div class="item">
                    <span class="text-light-black fw-semibold fs-12"> LinkedIn Url<br /> </span>
                    <div class="content fw-regular">
                      {{ user.linkedin_url }}
                    </div>
                  </div>
                </li>
              </ul>
              <ul class="inline-list profile-edit-group center" id="sty_button">
                <li>
                  <a (click)="updatePassword()" class="dark-link pointer">
                    <strong class="fw-semibold fs-15 change-password-text">Change Password</strong>
                  </a>
                </li>
                <li>
                  <button
                    (click)="updateUserDetails()"
                    class="btn ev-btn-dark waves-effect waves-dark grad-btn grad-btn-dark fs-14"
                  >
                    Update Profile
                  </button>
                </li>
              </ul>
            </div>
            <div class="modal-container" [class.hidden]="!isTokenModalVisible">
              <div class="modal-card">
                <div class="title">
                  API Authentication Token
                </div>
                <div class="form row">
                  <div class="col-lg-10 col-md-10 col-sm-10 col-xs-10 token-container">
                    <app-input
                      id="auth_token_input"
                      [label]="'token'"
                      [placeholder]="'Auth Token'"
                      [type]="'password'"
                      [theme]="'dark'"
                      [value]="token"
                      [readonly]="true"
                      #formtoken
                    ></app-input>
                  </div>
                  <button
                    class="col-lg-1 col-md-1 col-sm-1 col-xs-1 btn ev-btn-dark btn-waves-effect waves-dark grad-btn code-btn"
                    id="auth_button_style"
                    (click)="copyToken()"
                  >
                    <i class="fa fa-clipboard" aria-hidden="true" alt="Copy to clipboard."></i>
                  </button>
                </div>
                <ul class="inline-list auth_token_button">
                  <li>
                    <a (click)="isTokenModalVisible = false" class="dark-link pointer">
                      <strong class="fw-semibold fs-15">Cancel</strong>
                    </a>
                  </li>
                  <li>
                    <a (click)="downloadToken()" class="dark-link pointer">
                      <strong class="fw-semibold fs-15">Download JSON</strong>
                    </a>
                  </li>
                  <li>
                    <a (click)="refreshAccessToken()" class="dark-link pointer">
                      <strong class="fw-semibold fs-15">Refresh Token </strong>
                    </a>
                  </li>
                  <li>
                    <span
                      class="btn btn-waves-effect waves-dark grad-btn grad-btn-dark fs-14 rm-pad-top show_token_button"
                      (click)="tokenModalButtonToggle()"
                      >{{ tokenModalButton }}</span
                    >
                  </li>
                </ul>
              </div>
            </div>
          </div>
        </div>
      </div>
      <app-footer class="container-fluid"></app-footer>
    </div>
  </div>
</div>
